<template>
  <div class="text-live" v-if="events.length">
    <!-- 左侧节点导航 -->
    <div class="period-nav">
      <div
          v-for="(period, index) in periods"
          :key="index"
          :class="['period-item', { active: currentPeriod === period.value }]"
          @click="switchPeriod(period.value)"
      >
        {{ period.label }}
      </div>
    </div>

    <!-- 右侧事件列表 -->
    <div class="event-list">
      <div v-for="(event, index) in events" :key="index" class="event-item">
        <!-- 时间 -->
        <div :class="['', !(index === 0 || index === events.length - 1) ? 'time' : 'time-point']">
          <span>{{!(index === 0 || index === events.length - 1) ? occurTime(event.occurTime) : '' }}</span>
        </div>
        <div class="text" v-show="!(index === 0 || index === events.length - 1)">
          <!-- 时间范围 -->
          <div class="time-range">{{ event.timeRange }}</div>

          <!-- 事件内容 -->
          <div class="content">{{ event.content }}</div>


          <img
              src="@/assets/imgs/banner.webp"
              class="flag-icon"
              alt="3456"
          />
        </div>
        <!-- 国旗图标 (如果有) -->

      </div>
    </div>
  </div>


  <div class="empty" v-else>
    <img src="@/assets/imgs/empty.webp" class="empty-icons" />
    <p>暂无数据</p>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {useRoute} from "vue-router";
import {getMatchFootballTextDetail} from "@/api/match";


const route = useRoute();

const currentPeriod = ref('period4')

const periods = [
  { label: '第四节', value: 'period4' },
  { label: '第三节', value: 'period3' },
  { label: '第二节', value: 'period2' },
  { label: '第一节', value: 'period1' }
]

const events = ref([
  {
    time: '00:00',
    timeRange: '24-31',
    content: '1',
    flag: '/src/assets/imgs/download/bg.webp'
  },
  {
    time: '00:00',
    timeRange: '24-31',
    content: '2',
    flag: '/src/assets/imgs/download/bg.webp'
  },
  {
    time: '00:00',
    timeRange: '24-31',
    content: '3',
    flag: '/src/assets/imgs/download/bg.webp'
  },
  {
    time: '00:00',
    timeRange: '24-31',
    content: '4',
    flag: '/src/assets/imgs/download/bg.webp'
  },
  {
    time: '00:00',
    timeRange: '24-31',
    content: '3',
    flag: '/src/assets/imgs/download/bg.webp'
  },
  {
    time: '00:00',
    timeRange: '24-31',
    content: '3',
    flag: '/src/assets/imgs/download/bg.webp'
  },
  {
    time: '00:00',
    timeRange: '24-31',
    content: '3',
    flag: '/src/assets/imgs/download/bg.webp'
  },
  {
    time: '00:00',
    timeRange: '24-31',
    content: '3',
    flag: '/src/assets/imgs/download/bg.webp'
  },
  {
    time: '00:00',
    timeRange: '24-31',
    content: '3',
    flag: '/src/assets/imgs/download/bg.webp'
  },
  // ... 更多事件数据
])

const switchPeriod = (period) => {
  currentPeriod.value = period
  // TODO: 根据选中的节数加载对应的事件数据
}

const textLive = () => {
  let matchId = route.query.id
  getMatchFootballTextDetail({matchId}).then(res => {
    console.log(res, '---res---');
    events.value = res.data.events || []
  })
}


const occurTime = (time: number) => {
  return Math.round(time / 60) + '\''
}

onMounted(() => {
  textLive()
})
</script>

<style scoped lang="scss">
.text-live {
  display: flex;
  padding: 24px 40px;
  min-height: 500px;
  .period-nav {
    width: 120px;
    font-size: 14px;
    .period-item {
      padding: 12px 20px;
      border-radius: 6px 0 0 6px;
      border: 1px solid #E2EEFF;
      border-right: none;
      text-align: center;
      cursor: pointer;
      color: #AFB8CB;
      margin-bottom: 10px;
      &.active {
        color: #fff;
        background-color: #00B96B;
      }
    }
  }

  .event-list {
    flex: 1;
    padding: 16px 20px;
    border: 1px solid #E2EEFF;

    .event-item:nth-of-type(1) {
      .time-point {
        margin-bottom: 10px;
      }
    }
    .event-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      .time {
        position: relative;
        width: 60px;
        padding:0 0 16px;
        color: #AFB8CB;
        text-align: center;
        &::after {
          content: '';
          position: absolute;
          top: 70%;
          left: 35%;
          width: 1px;
          height: 28px;
          background-color: #E2EEFF;
        }
        //.time-line {
        //  height: 80px;
        //  width: 1px;
        //  background-color: #d24d4d;
        //}
      }
      .time-point {
        position: relative;
        width: 20px;
        height: 20px;
        margin-left: 10px;
        background: rgba(22, 177, 58, 0.21);
        border-radius: 50%;
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 10px;
          height: 10px;
          background: #16B13A;
          border-radius: 50%;
        }
        &::after {
          content: '';
          position: absolute;
          top: 116%;
          left: 50%;
          width: 1px;
          height: 28px;
          background-color: #E2EEFF;
        }
      }

      .text {
        display: flex;
        align-items: center;
        flex: 1;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 16px;
        .time-range {
          width: 80px;
          color: #AFB8CB;
        }
        .content {
          color: #AFB8CB;
        }
        .flag-icon {
          width: 24px;
          height: 16px;
          margin-left: auto;
        }
      }



    }
  }


}

.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #afb8cb;
  .empty-icons {
    width: 300px;
    height: 300px;
    // margin-bottom: 20px;
  }
}
</style>
